Image 4.3
Source: iStock
Description: A composite illustration with many computer-based icons that demonstrate construction by showing a computer monitor on a bridge or arched-support platform. There is a crane on either side of the monitor. Buildings are in the background. Various icons include speech bubbles, magnifying glasses, arrows, questions marks, video, and Wi-Fi. There are also gears, puzzles pieces, music notes, and checkmarks.
Building websites has become a common requirement in coursework, the workplace, and as a digital portfolio to showcase your skills, achievements, and personal brand. A website is a digital platform that consists of web pages and includes a variety of multimedia content such as text, images, videos, and audio. Websites can be created for various purposes, such as educational, informational, e-commerce, and entertainment. Overall, a website is a powerful tool that allows people from all over the world to connect, share, and communicate with each other in the digital realm.
In the past, coding experience was required to build a website. Coding involves using a programming language (e.g., JavaScript, H.T.M.L., C.S.S., C++) to write instructions that a computer can interpret and follow. However, website building tools (e.g., Google Sites, Adobe Express, Wix, and Weebly) have made it possible for anyone to build a website without coding knowledge.
Graphic design principles play an important role in building an engaging website that clearly communicates your message and brand. Website building tools provide templates to enhance the graphic design of your website. In addition, website building tools offer many options for you to customize your website’s design and content.
When creating a website, you should start with an outline, known as a wireframe. The main elements of a website are text, images, and other media (e.g., video and audio). Click on the flashcards to learn more.
When writing for the web, it’s important to make your content clear and easy to read. A website is not an essay, so you can’t simply cover your website in huge blocks of text if you want to reach your audience.
Image 4.4
Source: iStock
Description: An oversized laptop showing a representation of a website being built. An undersized character is moving a gear, another is placing a text block on the webpage, and a third is sitting off to the side sitting on the ground using a laptop of their own.
Your brain can process information faster in an image than in a block of text, so using them makes your information easier to absorb. Images can also make your page more visually appealing.
Image 4.5
Source: iStock
Description: An oversized laptop showing a representation of a website being built. An undersized character is standing off to the side holding a lightbulb, another is placing a text block on the webpage, another is placing a graph or something similar, and another is holding up a block with four buttons. A fifth character is sitting on the top right edge of the laptop screen using a laptop of their own.
Video, audio, and other media can make your website more engaging, clearly communicate your messaging and brand, and make a lasting impression on your audience.
Image 4.6
Source: Monday.com
Description: An oversized laptop showing a representation of a website being built. An undersized character is standing off to the side holding a magnifying glass examining of block on a webpage. Another character is sitting off to the side sitting on the ground using a laptop of their own.
Watch this video to learn about creating a wireframe to build your website!
Video 4.4
Source: The Learning Portal / Le Portail d’Apprentissage. (2021, October 8). What is a Wireframe [Video]. YouTube. https://www.youtube.com/watch?v=P6N8JnUQDeA
Length: 2:19
Here are some helpful tips for website building.
Image 4.7
Source: eCampus Ontario
Description: A laptop screen displaying a list of text with the bullet points shown as a checkmark in a circle. The text is as follows. First, keep your intended audience in mind. Know who you are writing for and write at a level that will be meaningful to them. Use words your users will understand. Second, chunk your content into manageable sections. Clear headings and subheadings are a good way to tell your audience what to expect in each section. Third, front-load the important information. Use the journalism model of the "inverted pyramid". Start with the content that is most important to your audience. Fourth, use short sentences and paragraphs. Write out your content, then go back and remove all unnecessary words. Fifth and finally, use bullets and numbered lists. Bulleted and numbered lists can be a good way to break up your text and highlight information but be sure to use them in modernation.
Here are a few more tips to keep in mind:
Use meaningful images and media.
The images or media you choose should be related to the text content of your site.
Don’t overcrowd your site with graphics and other media.
Your brain experiences cognitive overload when there is too much visual information, so make sure your images and other media aren’t competing with each other or your background.
Make sure you have permission to use the image or media.
Images or media you find online may be protected by copyright, and it is illegal to use them without permission. Use open-licensed images and media where possible.
Publishing a Website
In order to build your website, you need to choose a tool to publish it. Luckily, there are many free or inexpensive platforms available that make website publishing easy.
Read more about building websites (The Learning Portal, n.d.)!
Find 3 websites and reflect on the following questions for each…
- What do you like about the website?
- How does the website follow the website building tips you learned in this section?
- How could the website be improved?
Coding Careers
Coding is the process of creating instructions that a computer can understand and execute. These instructions are written in a programming language, such as Python, Java, or C++, and are used to create software applications (apps), websites, and other digital products.
Coding involves breaking down complex tasks into smaller, more manageable steps and then using logic and problem-solving skills to create a sequence of commands that a computer can follow. It's a valuable skill that's in high demand in today's technology-driven world and can lead to a rewarding career in software development, web development, or other related fields.
Check out these articles to learn more about coding careers!
8 Types of Coding Jobs (+ Tips to Get Hired) (Coursera, 2023)
Top 15 Careers in Programming (With Salaries and Job Duties) (Indeed Editorial Team, 2023)